{% extends 'layout.html' %}

{% block content %}
    <div class="row">
        <div class="col-sm-12">
            <div class="box">
                <div class="box-header with-border">
                    <h3 class="box-title">填写基本信息</h3>

                    <div class="box-tools pull-right">
                        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i
                                class="fa fa-chevron-up"></i>
                        </button>
                        <div class="btn-group">
                            <button type="button" class="btn btn-box-tool dropdown-toggle" data-toggle="dropdown">
                                <i class="fa fa-wrench"></i></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i>
                        </button>
                    </div>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <div class="col-sm-10">
                        <form id="user_form" method="post" class="form-horizontal">
                            <div class="form-group">
                                <label class="control-label col-sm-2">用户名<span class="text-red">*</span>：</label>
                                <div class="col-sm-8">
                                    {{ user_form.username }}
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">姓名<span class="text-red">*</span>：</label>
                                <div class="col-sm-8">
                                    {{ user_form.name }}
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">密码<span class="text-red">*</span>：</label>
                                <div class="col-sm-8">
                                    {{ user_form.password }}
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">Email<span class="text-red">*</span>：</label>
                                <div class="col-sm-8">
                                    {{ user_form.email }}
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label class="control-label col-sm-2">用户组：</label>
                                <div class="col-sm-8">
                                    <select id="groups" name="groups" class="form-control m-b" multiple size="8">
                                        {% for group in group_all %}
                                            {% if forloop.first %}
                                                <option value="{{ group.id }}" selected>{{ group.name }}</option>
                                            {% else %}
                                                <option value="{{ group.id }}">{{ group.name }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <label for="role" class="col-sm-2 control-label">权限<span
                                        class="red-fonts">*</span></label>
                                <div class="col-sm-10">
                                    {% for r, role_name in user_role.items %}
                                        <div class="col-sm-3">
                                            <div class="radio i-checks">
                                                <label><input type="radio" value="{{ r }}" class="role" name="role"
                                                              {% ifequal r 'CU' %}checked{% endifequal %}>{{ role_name }}
                                                </label>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button id="submit_button" class="btn btn-default" type="submit">保存</button>
                                    <a class="btn btn-white" href="javascript:history.go(-1)" type="submit">取消
                                    </a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block self_footer_js %}
    <script>
        $('#user_form').validator({
            timely: 2,
            theme: "yellow_right_effect",
            stopOnError: true,
            fields: {
                "username": {
                    rule: "required",
                    tip: "用户名",
                    ok: ""
                },
                "name": {
                    rule: "required",
                    tip: "姓名",
                    ok: ""
                },
                "password": {
                    rule: "required;length[6~50]",
                    tip: "输入密码",
                    ok: ""
                },
                "email": {
                    rule: "required;email",
                    tip: "Email",
                    ok: ""
                }
            },
            valid: function (form) {
                form.submit();
            }
        });
    </script>
{% endblock %}
